<%-- 
    Document   : index
    Created on : Sep 19, 2011, 10:08:06 AM
    Author     : LOCHT
--%>

<%@page import="xml.Generator"%>
<%@page import="javax.xml.transform.stream.StreamResult"%>
<%@page import="java.io.StringWriter"%>
<%@page import="java.io.File"%>
<%@page import="javax.xml.transform.Transformer"%>
<%@page import="javax.xml.transform.stream.StreamSource"%>
<%@page import="javax.xml.transform.TransformerFactory"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="pageFunc"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/common.js" type="text/javascript"></script>
<title>Catalogue</title>
<%
    String xml = Generator.xmlGen(getServletContext().getRealPath("WEB-INF"));
%>


<script type="text/javascript">
var carDoc;
var bmDoc;

function createDOMTree()
{
    var xml = '<%= xml %>';
    var bmXml = '<List><Producer><Name></Name><Model></Model></Producer><Producer><Name>BMW</Name><Model></Model><Modell>BMW X1</Modell><Modell>BMW X3</Modell><Modell>BMW X6</Modell><Modell>BMW Z4</Modell></Producer><Producer><Name>Ferrari</Name><Model></Model><Modell>Ferrari F430</Modell><Modell>Ferrari SA APERTA</Modell></Producer><Producer><Name>Lamborghini</Name><Model></Model><Modell>Lamborghini LP560-4</Modell><Modell>Lamborghini LP700-4</Modell></Producer><Producer><Name>Mercedes</Name><Model></Model><Modell>Mercedes Benz C250</Modell><Modell>Mercedes Benz ML350SUV</Modell><Modell>Mercedes Benz S63 AMG</Modell><Modell>Mercedes Benz SL63</Modell></Producer></List>';
    
    carDoc = loadXMLString(xml);
    bmDoc = loadXMLString(bmXml);
    
    l = bmDoc.documentElement.childNodes;
    
    
    for (i = 0; i<l.length; i++)
        {
            document.getElementById("jumpBrand").appendChild(createOption(l[i].childNodes[0].textContent, l[i].childNodes[0].textContent))
        }
        
    
    //x[i].childNodes[0].text -- CarID
    //x[i].childNodes[1].text -- Model
    //x[i].childNodes[2].text -- Price
    //x[i].childNodes[3].text -- Description
    //x[i].childNodes[4].text -- YearProduced
    //x[i].childNodes[5].text -- Picture
    //x[i].childNodes[6].text -- Producer
    
    search("","");
    
}

var feedModel = function(producer) {
    l = bmDoc.documentElement.childNodes;
    
    for (i = 0; i<l.length; i++)
        {
            if (l[i].childNodes[0].textContent == producer)
                {
                    document.getElementById("jumpModel").innerHTML = "";
                    t = l[i].childNodes;
                    for (j = 1; j < t.length; j++)
                        {
                            document.getElementById("jumpModel").appendChild(createOption(t[j].textContent, t[j].textContent))
                        }
                }
        }
}

var createOption = function(value, text)
{
    k = document.createElement("option");
    k.setAttribute("value",value);
    k.innerText = text;
    
    return k;
}

var search = function(brand, model) {
    x=carDoc.documentElement.childNodes;
    
    var countN = 0;
    
    document.getElementById("innerSub").innerHTML = "";
    for (i = 0; i < x.length; i++)
    {
        if (brand != "")
        {
            if (x[i].childNodes[6].textContent.indexOf(brand) != -1)
            {
                if (model != "")
                {
                    if (x[i].childNodes[1].textContent.indexOf(model) != -1)
                        {
                        addCarToGrid(x[i].childNodes[0].textContent, x[i].childNodes[1].textContent, x[i].childNodes[2].textContent, x[i].childNodes[3].textContent, x[i].childNodes[4].textContent, x[i].childNodes[5].textContent, x[i].childNodes[6].textContent);
                        countN++;
                        }
                }
                else
                {
                    addCarToGrid(x[i].childNodes[0].textContent, x[i].childNodes[1].textContent, x[i].childNodes[2].textContent, x[i].childNodes[3].textContent, x[i].childNodes[4].textContent, x[i].childNodes[5].textContent, x[i].childNodes[6].textContent);
                    countN++;
                }
            }
        }
        else 
        {
            if (x[i].childNodes[6].textContent.indexOf(brand) != -1)
            {
                if (model != "")
                {
                    if (x[i].childNodes[1].textContent.indexOf(model) != -1)
                        {
                        addCarToGrid(x[i].childNodes[0].textContent, x[i].childNodes[1].textContent, x[i].childNodes[2].textContent, x[i].childNodes[3].textContent, x[i].childNodes[4].textContent, x[i].childNodes[5].textContent, x[i].childNodes[6].textContent);
                        countN++;
                        }
                }
                else
                {
                    addCarToGrid(x[i].childNodes[0].textContent, x[i].childNodes[1].textContent, x[i].childNodes[2].textContent, x[i].childNodes[3].textContent, x[i].childNodes[4].textContent, x[i].childNodes[5].textContent, x[i].childNodes[6].textContent);
                    countN++;
                }
            }
        }
        
            document.getElementById("resultN").innerText = countN;
        //if (x[i].childNodes[6].text.indexOf(brand) != -1 || x[i].childNodes[1].text.indexOf(model) != -1 && (brand != "" && model != ""))
        //    addCarToGrid(x[i].childNodes[0].text, x[i].childNodes[1].text, x[i].childNodes[2].text, x[i].childNodes[3].text, x[i].childNodes[4].text, x[i].childNodes[5].text, x[i].childNodes[6].text)
    }
}

function addCarToGrid(id, model, price, des, yearp, img, producer)
    {
        k = document.createElement("div");
        k.setAttribute("id", "item");
        k.setAttribute("style", "width:20%;margin:2%;float:left;border:3px solid;background-color:gray;border-radius:5px;");
        k.innerHTML = "<img alt=\"" + model + "\" src=\"images/carImg/" + img + "\" width=\"95%\" height=\"100\" style=\"margin:5px;\"\/>\
                    <div class=\"item_info\" style=\"margin:5px;\">\
                        <span class=\"searchText\" style=\"font-size:14px;margin-top:10px;\">"+ model +"<\/span><br\/>\
                         <br\/>\
                         Producer: " + producer + "<br\/>\
                         Price: $" + price + "<br\/>\
                        <div style=\"width:100%;\">\
                            <a class=\"shoppingText\" style=\"width:50%\" href=\"javascript:void(0);\" onclick=\"AddToCart(\'addCart?itemID=" + id + "&amp;itemModel=" + model + "&amp;itemDescription=" + des + "&amp;itemPrice=" + price + "&amp;itemImage=" + img + "&amp;itemQuantity=1\');\">Add to cart<\/a>|\
                            <a class=\"shoppingText\" style=\"width:40%;float:right\" href=\"carDetails.jsp?itemID=" + id + "\">Details<\/a>\
                        <\/div>\
                    <\/div>";
        document.getElementById("innerSub").appendChild(k);
    }


function SelectText(id)
		{
			document.getElementById(id).focus();
			document.getElementById(id).select();
		}
	var bnr = 0;
	window.setInterval(function() {
		document.getElementById("bannerImg").src = "images/banner"+bnr+".jpg";
		bnr++;
		if (bnr==5) bnr = 0;
	}, 3000);
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<link rel="stylesheet" type="text/css" href="css/paging.css"/>
<link rel="stylesheet" type="text/css" href="css/button.css"/>
</head>

<body onload="createDOMTree();">
	<div id="container">
    	<div id="header">
        	<div id="logo">
            	<img src="images/logo_top.gif" width="500" height="62" alt="logo" />
            </div>
            <!-- ######################### User Login Module ######################## -->
                <pageFunc:set var="user" value="${sessionScope.USER}"/>
                <pageFunc:if test="${empty user}">
                    <form action="UserController" method="POST">
                        <div id="login">
                            <br/><span class="loginText">Username</span>
                            <input id="txtUsername" onclick="SelectText('txtUsername')" name="txtUsername" type="text" maxlength="20" width="100px"/>
                            <br/><span class="loginText">Password</span>
                            <input id="txtPassword" onclick="SelectText('txtPassword')" name="txtPassword" type="password" maxlength="20" width="100px"/>
                            <br/>
                            <input type="submit" class="inputBtn" value="Login" name="btnAction" />
                            <input type="submit" class="inputBtn" value="Forgot Password ?" name="btnAction" />
                            <input type="button" class="inputBtn" value="Register" name="btnAction" onclick="location.href='user.jsp'"/>
                        </div>
                    </form>
                </pageFunc:if>   
                <pageFunc:if test="${not empty user}">                    

                    <pageFunc:url var="editUser" value="UserController">
                        <pageFunc:param name="btnAction" value="AccountSetting"/>
                    </pageFunc:url>
                    <br/><span class="loginText">
                        <a class="linkLoginText" style="width:40px;" href="${editUser}">Welcome! ${user.getID()}</a>
                    </span>

                    <pageFunc:url var="logout" value="UserController">
                        <pageFunc:param name="btnAction" value="Log Out"/>
                    </pageFunc:url>
                    <a class="linkLoginText" style="width:40px;" href="${logout}">Log Out</a>
                </pageFunc:if>
            </div>
            <!-- *************************** End User Login Module ********************************* -->
        <div id="banner">
       	  <img src="images/banner2.jpg" name="bannerImg" width="760" height="210" id="bannerImg" />
        </div>
		<div id="menu">
        	<ul class="navigation">
                <li><a href="index.jsp"><em class="home"></em><b>Home</b></a></li>
                <li><a href="news.jsp"><em class="templates"></em><b>News</b></a></li>
                <li><a href="user.jsp"><em class="psd"></em><b>User</b></a></li>
                <li class="current"><a href="catalogue.jsp"><em class="tutorials"></em><b>Catalogue</b></a></li>
                <li><a href="shoppingcart.jsp"><em class="shop"></em><b>Shopping cart</b></a></li>
                <li><a href="contact.jsp"><em class="contact"></em><b>Contact Us</b></a></li>
            </ul>
      </div>

      <div id="main" style="float:left;">
         <div class="left" style="width:100%;">
         	<div class="searchDiv" style="height:90px;width:95%">
            <div style="float:left; width:100%;padding-top:30px;">
            <form name="form1" id="form">
                <div style="padding-left:30px;float:left">
                    <font color="#FFFFFF">Brand</font>
                    <select name="jumpBrand" id="jumpBrand" style="width:100px" onchange="feedModel(this.options[this.selectedIndex].textContent);search(this.form.jumpBrand.options[this.form.jumpBrand.selectedIndex].textContent,this.form.jumpModel.options[this.form.jumpModel.selectedIndex].textContent);">
                          </select></div>
                <div style="padding-left: 30px;float:left">
                    <font color="#FFFFFF">Model</font>
                    <select name="jumpModel" id="jumpModel" style="width:100px" onchange="search(this.form.jumpBrand.options[this.form.jumpBrand.selectedIndex].textContent,this.form.jumpModel.options[this.form.jumpModel.selectedIndex].textContent);">
                          </select></div>
                    
                    <div style="padding-left:30px;float:left">
                        <button id="btsearch" style="margin-top:0;" >&lt;--</button></div>
                  </form>
             </div>
        	</div>
          </div>

      <div id="sub" style="width:100%;float:left;margin-top:30px;">
      		<div class="searchText" style="width:45%">SEARCH RESULT
            	<span class="loginText" style="float:right;width:160px;">Found <span id="resultN">200</span> cars</span></div>
            <div class="paginationTG" style="width:50%;margin-left:2%">
                <ul>
                    Page
                    <li class='currentpage'>1</li>
                </ul>
            </div> <div id="innerSub"><%--
                <%
                    String html = Generator.xmlTransform(getServletContext().getRealPath("WEB-INF/itemcart.xsl"), getServletContext().getRealPath("WEB-INF/cars.xml"));

                    out.print(html);
%>--%></div>
       </div>
           </div>

            <div id="footer" class="navigation">
                <span style="margin-top:10px">Copyright by LocHT. All right reserved.</span>
            </div>
      </div>

</body>
</html>
